<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>部门管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表格树 -->
    <el-card class="mt-4">
        <el-space class="mb-4">
            <el-button plain type="primary" :icon="CirclePlus" @click="showAddOrUpdatePage('add', null)"
                v-perm="['sys:dept:add']">添加</el-button>
            <el-button plain type="danger" :icon="Delete" @click="batchDelete"
                v-perm="['sys:dept:delete']">删除</el-button>
        </el-space>
        <el-table :data="tableData" border :header-cell-style="{ 'background': '#f2f2f2', 'color': '#515a6e' }"
            style="width: 100%" height="calc(100vh - 200px)" max-height="calc(100vh - 200px)" row-key="id"
            @selection-change="handleSelectionChange" default-expand-all v-loading="tableLoading">
            <el-table-column type="selection" width="55px" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column label="部门领导">
                <template #default="scope">
                    <p v-if="scope.row.leader">{{ scope.row.leader.realName }}({{ scope.row.leader.username }})</p>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" width="250px" fixed="right">
                <template #default="scope">
                    <el-space>
                        <el-button link type="primary" :icon="CirclePlus"
                            @click="showAddOrUpdatePage('addRow', scope.row)" v-perm="['sys:dept:add']">添加</el-button>
                        <el-button link type="warning" size="small" :icon="EditPen"
                            @click="showAddOrUpdatePage('updateRow', scope.row)"
                            v-perm="['sys:dept:update']">修改</el-button>
                        <el-button link type="danger" size="small" :icon="Delete" @click="deleteById(scope.row)"
                            v-perm="['sys:dept:delete']">删除</el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <AddOrUpdate ref="addOrUpdatePageRef" :queryTree="queryTree"></AddOrUpdate>
</template>

<script setup>
import { onMounted, ref } from "vue"
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { queryDeptAllTreeReq, deleteReq } from '@/api/sys/dept/index.js'

import { confirm } from '@/utils/messageBoxUtils.js'
import { success, info } from '@/utils/messageUtils.js';

import AddOrUpdate from "@/views/sys/dept/AddOrUpdate.vue";

onMounted(() => {
    queryTree();
})

const tableLoading = ref(false)
const tableData = ref([])
const queryTree = () => {
    tableLoading.value = true;
    queryDeptAllTreeReq().then(res => {
        if (res.code == 200) {
            tableData.value = res.data
        }
    }).finally(() => {
        tableLoading.value = false
    })
}

// 删除
const deleteById = (row) => {
    const ids = []
    ids.push(row.id)
    confirm("您确定删除\"" + row.name + "\"菜单吗？").then(() => {
        deleteReq(ids).then(res => {
            if (res.code == 200) {
                queryTree();
                success("删除" + row.name + "菜单成功！");
            }
        })
    }).catch(() => {
        info("取消删除！");
    })
}

// 批量操作
const selectIds = ref([])
const handleSelectionChange = (val) => {
    selectIds.value = []
    val.forEach(item => {
        selectIds.value.push(item.id)
    })
}

// 批量删除
const batchDelete = () => {
    confirm("您确定删除选中的菜单吗？").then(() => {
        deleteReq(selectIds.value).then(res => {
            if (res.code == 200) {
                queryTree();
                success("删除成功！");
            }
        })
    }).catch(() => {
        info("取消删除！");
    })
}

// 添加
const addOrUpdatePageRef = ref()
const showAddOrUpdatePage = (type, row) => {
    addOrUpdatePageRef.value?.open(type, row)
}
</script>

<style>
.queryFormElCard .el-card__body {
    padding-bottom: 0;
}
</style>